<template>
    <div class="tt">
        <b>小默商城</b>
        <van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="请输入商品名称"
/>
    </div>
<van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img width="100%" height="200px" :src="image" />
  </van-swipe-item>
</van-swipe >
<van-grid column-num="5" icon-size="50px">
  <van-grid-item icon="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" text="热门推荐" />
  <van-grid-item icon="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" text="本店热卖" />
  <van-grid-item icon="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" text="优选新品" />
  <van-grid-item icon="https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg" text="网红爆品" />
  <van-grid-item icon="https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg" text="天天特价" />
</van-grid>
 <van-card width="100px"
   v-for="item in data"
  :key="item.id"
  
  :desc="item.name"
  :title="item.title"
  :thumb="item.url"
   @click="jk(item)"
/>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
let route=new useRouter
const data=ref([])
 const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
    ];
  const onSubmit = async() => {
        const jieko=await axios.get('/api/room/list')
        data.value=jieko.data.data.list
  }
   const jk=(v)=>{
     route.push({
           path:'/data/'+v.id,
           query:v
     })
   }
  onSubmit()
</script>

<style>
  .tt{
    width: 100%;
    height: 120px;
    background: #4fc08d;
  }
  b{
     color: #fff;
     font-size: 18px;
     padding: 15px;
     line-height: 50px;
  }
</style>